<template>
  <!-- 退款 -->
  <el-dialog
    title="退款"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="160px"
      @submit.native.prevent="onSubmit"
    >
      <el-row>
        <el-col :span="20">
          <el-form-item label="姓名：">
            <label>{{vipInfo.name}}</label>
          </el-form-item>
        </el-col>
        <el-col v-if="vip" :span="20">
          <el-form-item label="充值金额：">
            <label>￥{{vipInfo?vipInfo.amount:0}}</label>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="账户余额：">
            <label>￥{{vipInfo?vipInfo.balance:0}}</label>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="赠送余额：">
            <label>￥{{vipInfo?vipInfo.giveAmount:0}}</label>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="赠送金额：" prop="giveAmount">
            <el-input v-model="form.giveAmount">
              <template slot="prepend">扣除</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="vipInfo.usedProject" :span="20">
          <el-form-item v-if="vipInfo.usedProject.length>0" label="赠送项目：" prop="projectDeductionAmount">
            <el-input v-model="form.projectDeductionAmount">
              <template slot="prepend">扣除</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="已使用项目：">
             <label v-for="(obj,index) in vipInfo.usedProject" class="obj-item" :key="obj.sourceId">{{index+1}}、{{obj.sourceName}} <label class="money-label">￥{{obj.price}}</label></label>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="退款金额：" prop="amount">
            <el-input v-model="form.amount"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="20">
          <el-form-item label="剩余赠送金额：">
            <label>￥{{vipInfo?vipInfo.giveAmount:0}}</label>
          </el-form-item>
        </el-col> -->
        <el-col :span="20">
          <el-form-item label="备注：">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="退款方式" prop="payWay">
            <el-radio-group v-model="form.payWay">
              <template v-for="(value,key) in rechargeArr">
                <el-radio v-if="key==7 || key==10 || key==18" :label="key" :key="key">{{value}}</el-radio>
              </template>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button v-show="false" :loading="btnLoading" native-type="submit">提交</el-button>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
      <el-button :loading="btnLoading" @click="onClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import md5 from 'js-md5'
import encryptionArr from '../_enum/jiami'
import Valid from "@/_js/validate.js";
import enumArr from "../_enum/enum";
export default {
  props: ["value", "curItem","vip"],
  data() {
    var moreThenAmount=(rule,value,callBack)=>{
       if(this.vipInfo.amount<value){
         callBack(new Error('退款金额需小于充值金额'));
       }else{
         callBack();
       }
    };
    var moreThenGiveAmount=(rule,value,callBack)=>{
       if(this.vipInfo.giveAmount<value){
         callBack(new Error('退款赠送金额需小于账户剩余赠送金额'));
       }else{
         callBack();
       }
    };
    return {
      btnLoading: false,
      form: {
        patientId: "",
        amount: "",
        remark: "",
        giveAmount: "",
        payWay: "7",
        rechargeRecordId:'',
        projectDeductionAmount:''
      },
      rechargeArr: enumArr.rechargeArr,
      code: "",
      vipList: [],
      rules: {
        amount: [
          { required: true, message: "请输入退款金额", trigger: "blur" },
          {
            validator: Valid.integerAndFloat,
            trigger: "blur",
          },
          {
            validator: moreThenAmount,
            trigger: "blur",
          }
        ],
        payWay: [{ required: true, message: "支付方式必选", trigger: "blur" }],
        giveAmount: [
          {
            validator: Valid.integerAndFloat,
            trigger: "blur",
          },
          {
            validator: moreThenGiveAmount,
            trigger: "blur",
          }
        ],
      },
      
      typeNameArray: [], //种类标本
      vipInfo:''
    };
  },
  mounted() {
    this.onOpen();
  },
  methods: {
    onSubmit() {
      let th = this;
      if (th.vip.amount < th.form.amount) {
        th.$message.warning("退款金额超出账户余额，无法扣除，请正确输入！");
        return;
      }
      let j = { timestamp: Math.round(new Date().getTime() / 1000).toString(),rechargeRecordId:this.vip.id };
      let json = { signature: {} };
      let add = function () {
        th.btnLoading = true;
        th.$api.rechargeCenterRefund(json).then((res) => {
          if (res.executed) {
            th.$message.success("操作成功");
            th.$emit("success");
            th.onClose();
          } else {
            th.$message.error(res.message);
          }
          th.btnLoading = false;
        });
      };
      th.$refs["form"].validate((v) => {
        if (v) {
          th.form.patientId = th.curItem.patientId;
          json.signature = md5(encryptionArr({ ...th.form, ...j }));
          json = { ...th.form, ...j, ...json };
          add();
        }
      });
    },
    onOpen() {
      this.$nextTick(function () {
        if (this.curItem) {
          this.$api.refundDetail({ rechargeRecordId:this.vip.id}).then(res=>{
             if(res.executed){
               this.vipInfo=res.dataBody;
             }
          })
        }
      });
    },
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    },
  },
};
</script>
<style scoped>
.obj-item{
  display: inline-block;
  width: 100%;
}
.money-label{
  color: red;
}
</style>
